import {Button, Input, message, Modal} from "antd";
import {useNavigate} from "react-router-dom";
import {useEffect, useState} from "react";
import {baseURL} from "../../../utils/request.js";

const Main = () => {


    const navigate = useNavigate()
    const goWorkPlace = () => {
        navigate('/workplace')
    }

    const [isModalOpen, setIsModalOpen] = useState(false);

    const [code, setCode] = useState('')

    const handleCancel = () => {
        setIsModalOpen(false);
    };

    const handleOk = () => {
        console.log(code)
        fetch(baseURL + `/api/v1/auth/login?code=${code}`, {
            method: 'post',
            headers: {
                'Content-Type': 'application/json;charset=utf-8',
            },
        }).then(async res => {
            let result = await res.json()
            console.log(result)
            switch (result.code) {
                case '0000':
                    message.success('验证成功👻')
                    window.localStorage.setItem('token', result.data)
                    goWorkPlace()
                    break
                case 'Unauthorized-401-0003':
                    message.error('验证吗错误啦，请重新输入吧!🤷‍♂️')
                    break
                case '0001':
                    message.error('发生了未知错误🤷‍♂️')
                    break
            }
        })

        setIsModalOpen(false);

    };
    return (
        <>

            <Modal title="输入验证码开始创作之旅吧😀" okText={'验证'} cancelText={'取消'} onOk={handleOk}
                   open={isModalOpen} onCancel={handleCancel}>
                <Input value={code} onKeyup={(e) => {
                    if (e.code === 13) {
                        setCode(e.target.value)
                    }
                }} onChange={(e) => {
                    setCode(e.target.value)
                }} placeholder="输入验证码"/>
            </Modal>
            <div style={{
                width: '100vw',
                height: 519,
                borderBottom: '1px solid rgba(60, 60, 60, .12)',
                display: "flex",
                flexDirection: 'column',
                alignItems: "center",
                justifyContent: "center"
            }}>
                <div className={'websiteTitle'} style={{
                    fontSize: '76px',
                    letterSpacing: 1,
                    fontStyle: 'normal'
                }}>
                    FusionMind
                </div>
                <div style={{
                    fontSize: '76px',
                    lineHeight: 1.25,
                    fontWeight: 900,
                    letterSpacing: '-1.5px',
                    maxWidth: '960px',
                    margin: '0 auto',
                    color: '#213547'
                }}>
                    智慧写作助手
                </div>
                <div style={{
                    maxWidth: '960px',
                    lineHeight: 1.5,
                    color: 'rgba(60, 60, 60, .7)',
                    transition: 'color .5s',
                    fontSize: '22px',
                    margin: '24px auto 40px',
                }}>
                    更快速更好地写作
                </div>

                <div style={{
                    width: '100%',
                    height: 400,
                    userSelect: 'none',
                    zIndex:-99,
                    position:'fixed',
                    left:'50%',
                    top:'50%',
                    transform:'translate(-50%,-50%)'
                }}>
                    <spline-viewer url="https://prod.spline.design/pmTimXIl3471u1nQ/scene.splinecode"></spline-viewer>
                </div>


                <Button type={'primary'} style={{
                    height: 40,
                    width: 100,
                    fontSize: '16px',
                    display: 'inline-block',
                    borderRadius: '8px',
                    transition: 'background-color .5s, color .5s',
                    position: 'relative',
                    fontWeight: 600,
                    marginRight: ' 18px',
                    padding: '8px 1em',
                }}
                        onClick={() => {
                            setIsModalOpen(true)
                            message.info('请在右下角扫描二维码获取验证码哦😁️').then(r => null)
                        }}
                >
                    开始创作
                </Button>

            </div>
        </>
    )
}


export default Main
